<!--
 * @Author: gyc
 * @Date: 2020-06-22 14:24:21
 * @LastEditTime: 2020-08-18 09:10:09
 * @Description: Nuxt测试版
--> 
<template>
  <div class="ms-music">
    <div class="music-block"></div>
    <div class="music-box-m">
      <div class="music-list" v-if="showAside"></div>
      <div class="music-box">
        <img :src="musicImg" />
        <div class="music-box-btn" v-if="!isPlay" @click="play">
          <Icon type="md-play" size="32" color="white" />
        </div>
        <div class="music-box-btn" v-if="isPlay" @click="pause">
          <Icon type="md-pause" size="32" color="white" />
        </div>
        <i-progress :percent="progress" :stroke-width="5" class="music-progress" hide-info />
      </div>
      <div class="music-options" v-if="showAside">
        <div class="music-options-main">
          <h3>最新留言</h3>
          <p>
            <img src="/img/logo.png" />
            <span>
              aldasdda
              <Time :time="new Date()" style="color:#ccc;margin-left:5px;font-size:12px" />
            </span>
          </p>
          <p>
            <img src="/img/logo.png" />
            <span>
              达阿萨德阿萨德阿萨德按时阿达阿萨德按时党的凡人歌给达阿萨德阿萨德阿萨德按时阿达阿萨德按时党的凡人歌给
              <Time :time="new Date()" style="color:#ccc;margin-left:5px;font-size:12px" />
            </span>
          </p>
          <p>
            <img src="/img/logo.png" />
            <span>
              alda啊实打实大萨达阿萨德阿萨德阿萨德按时阿达阿萨德按时党的凡人歌给他个梵蒂冈二sdda
              <Time :time="new Date()" style="color:#ccc;margin-left:5px;font-size:12px" />
            </span>
          </p>
        </div>
        <div class="music-options-input">
          <input maxlength="30" placeholder="请输入你的留言吧" />
          <span class="options-input-btn">
            <Icon type="md-paper-plane" size="18" />
          </span>
        </div>
      </div>
    </div>
    <div class="music-lrc">
      <ul>
        <li v-if="lrcNow===-1">歌曲热身中</li>
        <li
          v-for="(item, index) in formatLrc"
          :key="index"
          v-if="formatLrc && lrcNow===index"
        >{{item.data}}</li>
      </ul>
    </div>
    <audio :src="musicNow" controls="controls" v-show="false" id="myAudio" loop></audio>
  </div>
</template>

<script>
export default {
  name: "msMusic",
  layout: "ipage",
  data() {
    return {
      musicNow: "",
      lrc: "", //歌曲歌词
      formatLrc: [], //歌词集合
      lrcNow: -1, //当前歌词
      testTime: 0,
      progress: 0,
      isPlay: false,
      currentTime: "00:00",
      duration: "00:00",
      timer: "",
      musicImg: "/img/logo.png",
      showAside: true,
    };
  },
  mounted() {
    console.log(this.$route.params);
    this.testTime = 0;
    this.$axios
      .get("/api/music/findMusic", { params: { id: this.$route.params.id } })
      .then((res) => {
        this.lrc = res.data.data.lrc;
        this.musicImg = res.data.data.img;
        this.musicNow = res.data.data.url;
        this.$nextTick(() => {
          this.myLrc();
        });
      });
    // this.$nextTick(() => {
    //   setInterval(() => {
    //     // this.lrcNow += 1;
    //     this.testTime += 10;
    //     // console.log(this.testTime);
    //     this.formatLrc.forEach(e => {
    //       if (e.time && this.testTime === this.timeToValue(e.time)) {
    //         this.lrcNow += 1;
    //         console.log("1");
    //       } else {
    //         console.log("2");
    //       }
    //     });
    //   }, 10);
    // });
    let x = document.getElementById("myAudio");
    console.log(x);
  },
  methods: {
    //歌词格式化
    myLrc() {
      this.formatLrc = [];
      let lrcs = this.lrc.split("[");
      lrcs.forEach((e) => {
        if (e) {
          let lrcson = e.split("]");
          if (lrcson[1].length > 1) {
            this.formatLrc.push({
              ftime: this.timeToValue(lrcson[0]),
              time: lrcson[0],
              data: lrcson[1],
            });
            // console.log("1", lrcson[0], "2", lrcson[1]);
            // console.log(this.timeToValue(lrcson[0]));
          } else {
            // this.formatLrc.push({ data: lrcson[0] });
          }
        }
      });
      // this.$nextTick(() => {
      //   console.log(this.formatLrc);
      // });
    },
    //时间转数值(毫秒)
    timeToValue(e) {
      let timeList = e.split(":");
      let timeRight = timeList[1];
      let timeRightList = timeRight.split(".");
      let timeValue =
        parseInt(timeList[0] * 60 * 1000) +
        parseInt(timeRightList[0] * 1000) +
        parseInt(timeRightList[1]) * 10;
      return timeValue;
    },
    //时间格式化
    formaTime(val) {
      let m = Math.floor(parseInt(val) / 60);
      let s = parseInt(val) % 60;
      let mm, ss;
      if (m < 10) {
        mm = "0" + m;
      } else {
        mm = m;
      }
      if (s < 10) {
        ss = "0" + s;
      } else {
        ss = s;
      }
      let ft = mm + ":" + ss;
      return ft;
    },
    //播放音乐
    play() {
      var x = document.getElementById("myAudio"); //获取音频对象
      this.duration = this.formaTime(Math.ceil(x.duration));
      x.play();
      this.isPlay = true;
      let _this = this;
      _this.timer = setTimeout(function t() {
        //状态获取
        _this.currentTime = _this.formaTime(Math.ceil(x.currentTime)); //获取当前时间
        // console.log(parseInt(x.currentTime * 1000));
        console.log(x.mediaGroup);
        _this.progress =
          (Math.ceil(x.currentTime) / Math.ceil(x.duration)) * 100; //获取当前进度
        if (x.currentTime * 1000 > _this.formatLrc[_this.lrcNow + 1].ftime) {
          _this.lrcNow += 1;
          // console.log(_this.lrcNow);
        }
        clearTimeout(_this.timer);
        //播放状态下持续监听
        if (_this.isPlay) {
          setTimeout(t, 10);
        }
      }, 10);
    },
    pause() {
      var x = document.getElementById("myAudio");
      x.pause();
      this.isPlay = false;
      this.timer = null;
      clearTimeout(this.timer);
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1100px) {
  .music-options {
    display: flex;
  }
}
@media screen and (max-width: 1100px) {
  .music-options {
    display: none;
  }
}
.ms-music {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100vh;
  .music-box-m {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 60vh;
    width: 100%;
    .music-options {
      // display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      right: 0;
      top: 0;
      width: 300px;
      height: 400px;
      padding-left: 10px;
      padding-right: 10px;
      z-index: 100;
      background-color: white;
      .music-options-main {
        height: 650px;
        h3 {
          padding-bottom: 5px;
        }
        p {
          display: flex;
          align-items: flex-start;
          min-height: 24px;
          letter-spacing: 1px;
          margin-bottom: 5px;
          img {
            position: relative;
            height: 24px;
            width: 24px;
            margin-right: 5px;
            border-radius: 50%;
            top: 4px;
          }
          span {
            color: black;
          }
        }
      }
      .music-options-input {
        display: flex;
        position: relative;
        align-items: flex-end;
        height: 30px;
        input {
          width: 100%;
          outline: none;
          border: 0;
          height: 30px;
          background-color: rgb(247, 247, 247);
          padding-left: 10px;
          padding-right: 41px;
          border-radius: 15px;
          letter-spacing: 1px;
        }
        .options-input-btn {
          position: absolute;
          right: 11px;
          top: 6px;
          font-size: 12px;
          color: black;
          cursor: pointer;
        }
      }
    }
    .music-list {
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      height: 400px;
      padding-left: 10px;
      padding-right: 10px;
      h3 {
        margin-bottom: 5px;
      }
      ul {
        width: 100%;
        height: 100%;
        overflow: auto;
        li {
          display: flex;
          align-items: center;
          list-style: none;
          height: 24px;
          cursor: pointer;
          transition: all 0.4s ease-in-out;
          &:hover {
            padding-left: 10px;
            color: $gcolor;
          }
        }
      }
    }
  }
  .music-box {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    &:hover .music-box-btn {
      opacity: 1;
    }
    img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 2;
      border-radius: 50%;
    }
    .music-box-btn {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      top: 0;
      left: 0;
      width: 120px;
      height: 120px;
      background-color: rgba(0, 0, 0, 0.4);
      cursor: pointer;
      z-index: 5;
      border-radius: 50%;
    }
  }
  .music-lrc {
    height: 62px;
    overflow: hidden;
    ul,
    li {
      height: 100%;
    }
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      padding-bottom: 10px;
      letter-spacing: 2px;
      color: black;
    }
  }
}
@keyframes musicBg {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}
</style>